<template>
  <div class="rule-action-section">
    <div class="section-header">
      <div class="title-row">
        <h3 class="section-title">规则行为</h3>
        <n-tooltip trigger="hover" placement="top">
          <template #trigger>
            <n-icon class="help-icon" :component="HelpCircleOutline" />
          </template>
          <div class="help-content">
            <div class="help-section">
              <h4>req (请求对象)</h4>
              <ul>
                <li>req.url - 请求URL</li>
                <li>req.method - 请求方法</li>
                <li>req.headers - 请求头</li>
                <li>req.params - URL参数</li>
                <li>req.cookies - Cookie</li>
                <li>req.body - 请求体</li>
              </ul>
            </div>
            
            <div class="help-section">
              <h4>resp (响应对象)</h4>
              <ul>
                <li>resp.status - 状态码</li>
                <li>resp.headers - 响应头</li>
                <li>resp.cookies - 响应Cookie</li>
                <li>resp.body - 响应体</li>
              </ul>
            </div>
            
            <div class="help-section">
              <h4>nf (工具对象)</h4>
              <ul>
                <li>nf.http.get() - GET请求</li>
                <li>nf.http.post() - POST请求</li>
                <li>nf.http.put() - PUT请求</li>
                <li>nf.http.delete() - DELETE请求</li>
                <li>nf.http.patch() - PATCH请求</li>
                <li>nf.http.request() - 通用请求</li>
              </ul>
            </div>
            
            <div class="help-section">
              <h4>console (原生对象)</h4>
              <ul>
                <li>console.log() - 日志输出</li>
                <li>console.error() - 错误输出</li>
                <li>console.warn() - 警告输出</li>
                <li>console.info() - 信息输出</li>
                <li>console.table() - 表格输出</li>
                <li>console.time() - 计时开始</li>
                <li>console.timeEnd() - 计时结束</li>
              </ul>
            </div>
          </div>
        </n-tooltip>
      </div>
      <p class="section-description">
        编写JavaScript代码来定义规则触发后的行为，可使用req、resp、nf对象
      </p>
    </div>
    
    <div class="action-editor-wrapper">
      <action-editor 
        :value="value"
        @update:value="$emit('update:value', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { NTooltip, NIcon } from 'naive-ui';
import HelpCircleOutline from '@vicons/ionicons5/HelpCircleOutline';
import ActionEditor from '../ActionEditor.vue';

defineProps<{
  value: string;
}>();

defineEmits<{
  'update:value': [value: string];
}>();
</script>

<style scoped>
.rule-action-section {
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
  padding: 16px;
  background: var(--n-color);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-header {
  margin-bottom: 16px;
  flex-shrink: 0;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--n-text-color);
}

.help-icon {
  font-size: 16px;
  color: var(--n-text-color-3);
  cursor: help;
  transition: color 0.3s;
}

.help-icon:hover {
  color: var(--n-primary-color);
}

.section-description {
  margin: 0;
  font-size: 14px;
  color: var(--n-text-color-2);
}

.action-editor-wrapper {
  flex: 1;
  min-height: 0;
}

/* Tooltip帮助内容样式 */
.help-content {
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 8px;
}

.help-section h4 {
  margin: 0 0 8px 0;
  color: var(--n-primary-color);
  font-size: 14px;
  font-weight: 600;
}

.help-section ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.4;
}

.help-section li {
  margin-bottom: 4px;
  color: var(--n-text-color-2);
}
</style> 